<template>
  <div>
    <div class="gedan banxin2 tanxin">
      <div class="gedan-in">
        <ul class="tanxin">
          <li v-for="item in this.gedanList" :key="item.id">
            <img :src="item.picUrl" alt="" />
            <a href="#">{{ item.name }}</a>
          </li>
        </ul>
      </div>
    
    </div>
  </div>
</template>

<script>
import { RecomGeDanApi,  } from "@/request/api";
export default {
  created() {
    RecomGeDanApi({ limit: 8 }).then((res) => {
      console.log(res.data.result);
      this.gedanList = res.data.result;
    });

  },
  data() {
    return {
      gedanList: [],
      result: [],
    };
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.gedan {
  width: 980px;
  margin-top: 30px; 
  .gedan-in {
    height: 430px;
    width: 729px;
    overflow: hidden;
    ul {
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between !important;
      height: 100%;
      li {
        width: 24%;
        margin: 10px auto;
        text-align: center;
        img {
          margin: 0 auto;
          display: block;
          height: 140px;
          width: 140px;
        }
        a {
          margin: 15px 0;
          display: inline-block;
          width: 130px;
          height: 20px;
          font-size: 15px;
          color: #000;
        }
        &:nth-last-of-type(1) {
          transform: translateX(-157%);
        }
        &:nth-last-of-type(2) {
          transform: translateX(-52%);
        }
      }
    }
  }
}
</style>